<template>
  <div id="play">
    <div class="box">
      <div class="narrow_box" @click="narrow">
        <img src="/images/music/narrow.png" alt="" />
      </div>
      <div class="img">
        <img
          class="topimg"
          :class="getState ? 'playing' : 'pause'"
          src="/images/music/cm2_play_needle_play-ip6@2x.png"
        />
        <div
          class="innerimg"
          :style="{ 'animation-play-state': getState ? 'running' : 'paused' }"
        >
          <img :src="getImgUrl" alt />
        </div>
        <img
          class="outerimg"
          :style="{ 'animation-play-state': getState ? 'running' : 'paused' }"
          src="/images/music/disc.png"
        />
        <div class="music_name">
          {{ getName }}
          <span>--</span>
          {{ getAuthor }}
        </div>
      </div>
      <div class="lyrics">
        <my-scroll ref="playScroll" :opacity="opacity">
          <div class="lyricscontent">
            <ul v-if="getLyrics">
              <li
                v-for="(item, index) in getLyrics"
                :key="index"
                :class="currentIndex == index ? 'currentLyric' : ''"
              >
                {{ item[1] }}
              </li>
            </ul>
            <span v-else>暂无歌词</span>
          </div>
        </my-scroll>
      </div>
      <div class="progress">
        <div class="current">{{ currentTime | formDate }}</div>
        <el-progress
          :text-inside="true"
          :percentage="percentage"
          status="exception"
          @click.native="moved"
          :color="customColor"
        ></el-progress>
        <div class="duration">{{ duration | formDate }}</div>
      </div>
      <!--控制组件-->
      <div class="controlbox">
        <div>
          <div class="model" @click="changeModel">
            <img v-if="getModel == 0" src="/images/music/cm2_icn_loop@2x.png" />
            <img v-if="getModel == 1" src="/images/music/cm2_icn_one@2x.png" />
            <img
              v-if="getModel == 2"
              src="/images/music/cm2_icn_shuffle@2x.png"
            />
          </div>
          <div>
            <img
              class=""
              @click="prevSong"
              src="/images/music/cm2_play_btn_prev@2x.png"
            />
          </div>
          <div class="play_pause" @click="clickplay">
            <img
              class=""
              v-if="!getState"
              src="/images/music/cm2_fm_btn_play@2x.png"
            />
            <img class="" v-else src="/images/music/cm2_fm_btn_pause@2x.png" />
          </div>
          <div>
            <img
              class=""
              @click="nextSong"
              src="/images/music/cm2_fm_btn_next@2x.png"
            />
          </div>
          <div class="menu">
            <img
              @click="showMenu"
              class=""
              src="/images/music/cm2_icn_list@2x.png"
            />
          </div>
        </div>
      </div>
      <!-- 背景 -->
      <div class="bgbox">
        <img :src="getImgUrl" alt class="bg" />
        <div class="bg-mask"></div>
      </div>
    </div>
    <transition name="fade">
      <div id="menu" v-if="show">
        <div class="top">
          <div class="text">播放列表：共{{ getMusicList.length }}首</div>
          <div class="close" @click="close">
            <img src="/images/music/cm2_playlist_icn_dlt@2x.png" alt="" />
          </div>
        </div>
        <div class="bottom">
          <my-scroll :opacity="1">
            <div
              v-for="(item, index) in getMusicList"
              :key="index"
              class="item"
              @click="playSong(index)"
            >
              <span
                class="num"
                :class="getIndex == index ? 'active_color' : ''"
                >{{ index + 1 }}</span
              >
              <span
                class="name"
                :class="getIndex == index ? 'active_color' : ''"
                >{{ item.name }}</span
              >
              <span
                class="author"
                :class="getIndex == index ? 'active_color' : ''"
                >{{ item.author }}</span
              >
              <span
                class="el-icon-delete delete"
                @click="delsong(index)"
              ></span>
            </div>
          </my-scroll>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      show: false,
      currentTime: 0,
      currentIndex: 0,
      scrolltop: 0,
      opacity: 0,
      percentage: 0,
      customColor: "#dd0c5c",
      // currentTime: "00",
      // duration: "00",
    }
  },
  computed: {
    // vue辅助函数
    ...mapGetters([
      "getState",
      "getName",
      "getAuthor",
      "getMusicUrl",
      "getImgUrl",
      "getIndex",
      "getModel",
      "getLyrics",
      "getMusicList",
    ]),
  },
  filters: {
    formDate(date) {
      //格式化时间过滤器
      var m = parseInt(date / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt(date % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
  watch: {
    scrolltop: function(newValue, oldValue) {
      this.$refs.playScroll.$refs.vs.scrollTo({
        y: newValue,
      })
    },
  },
  mounted() {
    var audio = document.getElementById("myaudio")

    //监听音频是否可以开始播放
    audio.addEventListener("canplay", () => {
      this.duration = audio.duration
    })
    // 监听音频播放的进度
    audio.addEventListener("timeupdate", () => {
      this.currentTime = audio.currentTime
      this.percentage = (this.currentTime / this.duration) * 100
      if (this.getLyrics) {
        let lyricArray = this.getLyrics
        let length = lyricArray.length
        if (length) {
          //获取歌词数字
          //计算滚动条的位置
          if (this.currentIndex == 0) {
            this.scrolltop = 0
          }
          if (this.currentIndex >= 2) {
            this.scrolltop = (this.currentIndex - 2) * 25
          }
          //遍历所有歌词
          //最后一句歌词没有下一句,所以不需要跟下一句的时间做比较
          if (this.currentIndex == length - 2) {
            //判断当前的时间是否大于等于最后一句的时间
            if (this.currentTime >= lyricArray[length - 1][0]) {
              //正在唱最后一句
              this.currentIndex = length - 1
            }
          } else {
            for (var i = 0; i < length - 1; i++) {
              //将每个歌曲进度都跟数组中的歌词比较,在当前歌词的时间到下一句歌词的时间范围之内
              if (
                this.currentTime >= lyricArray[i][0] &&
                this.currentTime < lyricArray[i + 1][0]
              ) {
                //设置正在播放的行号
                this.currentIndex = i
                this.val = lyricArray[i][1]
              }
            }
          }
        }
      }
    })
  },

  methods: {
    // 关闭页面
    narrow() {
      this.$EventBus.$emit("changeShowPlay") //更改App.vue页面Play组件的状态
    },
    // 点击播放暂停
    clickplay() {
      this.$EventBus.$emit("play_pause") //更改MyAudio.vue页面audio标签的状态
    },
    // 点击更换播放模式
    changeModel() {
      let model = this.getModel + 1
      if (model > 2) {
        model = 0
      }
      this.$store.commit("changeModel", model)
    },
    //拖动进度条触发的事件
    moved(e) {
      let progress = document.body.clientWidth * 0.7
      this.percentage = e.offsetX / progress
      this.currentTime = this.duration * this.percentage
      var audio = document.getElementById("myaudio")
      audio.currentTime = parseInt(this.percentage * this.duration)
    },
    // 上一首
    prevSong() {
      this.$store.commit("prev", { model: this.clickModel })
    },
    // 下一首
    nextSong() {
      this.$store.commit("next", { model: this.clickModel })
    },
    // 打开播放列表
    showMenu() {
      this.show = true
    },
    // 关闭播放列表
    close() {
      this.show = false
    },
    // 点击播放列表
    playSong(index) {
      this.$store.commit("upDateIndex", index)
    },
    // 删除歌曲
    delsong(index) {
      this.$store.commit("delete", index)
    },
    // 删除列表中所有歌曲
    deleteAll() {
      uni.showModal({
        title: "提示",
        content: "您确认清空播放列表？",
        success: (res) => {
          if (res.confirm) {
            this.$store.commit("deleteAll")
          } else if (res.cancel) {
          }
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import "./play.scss";
</style>
